<template>
    <div class="mine-shopsettle">
        <van-nav-bar :title="voiceItem.filg==1?'添加设备':'编辑设备'" left-arrow fixed @click-left="onClickLeft" />

        <van-field label="云喇叭状态" readonly>
            <template #button>
                <van-switch active-color="#67C23A" inactive-color="#DCDFE6" :active-value="1" :inactive-value="0"
                    size="20" v-model="status" @change="switchChange" />
            </template>
        </van-field>

        <van-field v-model="name" name="name" label="云喇叭名称" placeholder="请输入云喇叭名称" input-align="right">
        </van-field>
        <!-- @click="startScanning" -->
        <van-field v-model="deviceId" :disabled="voiceItem.filg==0" name="deviceId" label="云喇叭编号" placeholder="请扫码获取设备号"
            input-align="right" @click="startScanning" right-icon="scan" readonly>
            <!-- right-icon="scan" -->
        </van-field>

        <div class="tips">取出云喇叭后，扫描设备背后的二维码即可</div>

        <div id="reader" style="width: 100%; height: 500px; display: none;"></div> <!-- 扫码区域 -->

        <van-button @click="onSubmit" style="width: 80%;margin: .3rem auto;" round block type="info"
            color="linear-gradient(to right, #FF5851, #E9011B)">保存</van-button>
            <van-button v-if="voiceItem.filg==0" color="#F32A23" plain @click="show=true" style="width: 80%;margin: 0 auto;" round block type="info"
            >解绑</van-button>
            <van-popup v-model="show" :style="{ width: '70%' }" round>
            <div class="popup_title" >
				<div class="msg-title" >
					<div style="text-align: center;font-size: 0.28rem;font-weight: 500; margin-bottom: 0.2rem;color: #333;margin-top: -0.3rem;" >温馨提示</div>
					<p>该设备解绑后，将不会再接到收款播报通知，请确认是否继续解绑？</p>
				</div>
			</div>

            <div class="popup_btn_list">
                <van-button class="popup_btn" size="small" round @click="show=false">取消</van-button>
                <van-button class="popup_btn" type="primary" size="small"
                    color="linear-gradient(to right, #FF5851, #E9011B)" round @click="Unbind">解绑</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Html5Qrcode } from "html5-qrcode";

export default {
    data() {
        return {
            id: this.$route.query.id,
            status: 0,
            name: '',
            ids:'',
            deviceId: '', // 用于存储设备号
            html5QrCode: null, // Html5Qrcode 实例
            isScanning: false, // 记录是否正在扫描
            voiceItem:{},
            show:false
        };
    },
    mounted() {
       this.voiceItem =JSON.parse(localStorage.getItem('voiceItem'))
        // console.log(JSON.parse(localStorage.getItem('voiceItem')));
        if(JSON.parse(localStorage.getItem('voiceItem'))){
            document.title=this.voiceItem.filg==1?'添加设备':'编辑设备'
            this.name = JSON.parse(localStorage.getItem('voiceItem')).name
            this.deviceId = JSON.parse(localStorage.getItem('voiceItem')).device_no ||this.$route.query.code
            this.status = JSON.parse(localStorage.getItem('voiceItem')).status
            this.ids = JSON.parse(localStorage.getItem('voiceItem')).id
        }
    },
    beforeDestroy() {
        if (this.html5QrCode) {
        }
    },
    methods: {
        onSubmit() {
            if(this.name == ''){
                this.$toast('请输入云喇叭名称');
                return
            }
            if(this.deviceId == ''){
                this.$toast('请扫描填写云喇叭编号');
                return
            }
        let params = {
            type: 1,
            name: this.name,
            device_no: this.deviceId,
            status: this.status,
        }
        if(this.voiceItem.filg==0){
            let data={
                id: this.ids,
                name: this.name,
                status: this.status,
            }
            this.$http.post(`/store/manage/${this.id}/voice_device_update`, data)
            .then(res => {
                this.$toast.success('操作成功');
                // this.$router.back();
                this.$router.replace('/shopSettleVoiceDevice?id='+this.id);
                localStorage.removeItem('voiceItem')

            })
        }else{
            this.$http.post(`/store/manage/${this.id}/voice_device_add`, params)
            .then(res => {
                this.$toast.success('操作成功');
                // this.$router.back();
                this.$router.replace('/shopSettleVoiceDevice?id='+this.id);
                localStorage.removeItem('voiceItem')

            })
        }

    },
    Unbind(){
        let data={
                id: this.ids,
            }
        this.$http.post(`/store/manage/${this.id}/voice_device_unbind`,data)
            .then(res => {
                this.$toast.success('解绑成功');
                this.$router.replace('/shopSettleVoiceDevice?id='+this.id);
                localStorage.removeItem('voiceItem')

            })
    },
        onClickLeft() {
            this.$router.back();
            localStorage.removeItem('voiceItem')
        },
        switchChange(bol) {
            // Switch change logic
        },
        startScanning(){
            if(this.voiceItem.filg==0){
                return
            }
            let data={
                name:this.name,
                deviceId:this.deviceId,
                status:this.status,
                ids:this.ids,
                filg:this.voiceItem.filg
            }
            localStorage.setItem('voiceItem',JSON.stringify(data))
            this.$router.push({path:'/scanCode',query:{id:this.$route.query.id}})
        }
    },

};
</script>

<style lang="scss">
.mine-shopsettle {
    min-height: 100vh;
    padding-top: 58px;
    box-sizing: border-box;
    background: #fff;
    .van-nav-bar .van-icon{
        color: #333333;
    }

   .van-nav-bar__arrow {
        font-size: 20px;
    }
    .tips {
        width: 95%;
        margin: 0.3rem auto;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 0.24rem;
        color: #666666;
        text-align: left;
    }
}
.popup_title {
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    font-style: normal;
    padding: 0.72rem 0;
}

.popup_btn_list {
    width: 90%;
    margin: 0 auto;
    padding-bottom: .4rem;
    display: flex;
    justify-content: space-between;

    .popup_btn {
        width: 45%;
    }

}
.msg-title{
	text-align: left;
	padding: 0 0.2rem;
	font-size: 0.24rem;
}
</style>